/**
 * Copyright (c) 2021 XuSaisai
 * ArcProgressStackViewJS is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *          http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */

import {Model} from '../../component/arcprogressstackview/Model.js';
import {CanvasRotateUtil} from '../../component/arcprogressstackview/CanvasRotateUtil.js';

const MAX_PROGRESS = 100.0;
export default {
    props: {
        apsvRounded: {
            default: false
        },
        apsvTypeface: {
            default: 'sans-serif'
        },
        apsvTextcolor: {
            default: '#ffffff'
        },
        apsvModelBgEnabled: {
            default: false
        },
        apsvShowProgress: {
            default: true
        },
        models: {
            default: new Array()
        }
    },
    data: {
        title: "",
        size: 0,
        centerX: 0,
        centerY: 0,
        mDrawWidthFraction: 0.7,
        mProgressModelSize: 0,
        mSweepAngle: Math.PI * 2,
        mProgressModelOffset: 0,
        mStartAngle: -Math.PI / 2,
        width: 0,
        height: 0,
        canvasRotateUtil: null,
    },
    computed: {
        sizePx() {
            return this.size + 'px'
        }
    },
    onInit() {
        this.title = this.$t('strings.world');

    },
    onAttached() {

    },
    onPageShow() {
        // 画布的绘制需要在页面展示后才能调用绘制，当前需要延迟，不然会出现绘制失败的情况
        this.updateSize();
        setTimeout(() => {
            this.onDraw();
        }, 100)

    },
    updateSize() {
        var width = this.$refs.stack_id.classStyle.width
        var height = this.$refs.stack_id.classStyle.height
        this.width = parseInt(width.replace('px', ''))
        this.height = parseInt(height.replace('px', ''))
        if (this.canvasRotateUtil == null) {
            this.canvasRotateUtil = new CanvasRotateUtil(this.width, this.height);
        }
        if (this.width >= this.height) {
            this.size = this.height;
        } else {
            this.size = this.width;
        }
        this.centerX = this.width / 2;
        this.centerY = this.height / 2;
        this.mProgressModelSize = this.size * this.mDrawWidthFraction / this.models.length / 2;
        for (var i = 0; i < this.models.length; i++) {
            var model = this.models[i];
            if (model instanceof Model) {
                const modelOffset = this.mProgressModelSize * i * 2;
                model.radius = (this.size - modelOffset) / 2 - this.mProgressModelSize;
            }
        }
    },

    onDraw() {
        const el = this.$refs.apsv_canvas;
        const ctx = el.getContext('2d', {
            antialias: true
        });
        for (var i = 0; i < this.models.length; i++) {
            var model = this.models[i];
            var progressFraction = model.progress / MAX_PROGRESS;
            var progress = progressFraction * this.mSweepAngle - Math.PI / 2;
            this.drawProgress(ctx, model, progress);
            this.drawText(ctx, model, progressFraction);
        }

    },
    drawProgress(ctx, model, progress) {
        ctx.lineWidth = this.mProgressModelSize;
        if (this.apsvModelBgEnabled == 'true') {
            ctx.beginPath();
            ctx.lineCap = 'butt'
            ctx.strokeStyle = model.bgColor;
            ctx.arc(this.centerX, this.centerY, model.radius, 0, this.mSweepAngle, false);
            ctx.stroke();
        }
        ctx.beginPath();
        ctx.strokeStyle = model.color;
        if (this.apsvRounded == 'true') {
            ctx.lineCap = 'round'
        } else {
            ctx.lineCap = 'butt'
        }
        ctx.arc(this.centerX, this.centerY, model.radius, -Math.PI / 2, progress, false);
        ctx.stroke();
    },

    drawText(ctx, model, progress) {
        ctx.fillStyle = this.apsvTextcolor;
        ctx.font = this.mProgressModelSize * 0.5 + "px" + " " + this.apsvTypeface;
        this.drawTitle(ctx, model);
        if (this.apsvShowProgress == 'true') {
            this.drawProgressText(ctx, model, progress);
        }
    },

    drawTitle(ctx, model) {
        var titlechar = model.title.split("");
        var randian = -0.25 * Math.PI * 2;
        var rotate = 0;
        var x = this.centerX + model.radius * Math.cos(randian) + 1;
        var y = this.centerY + model.radius * Math.sin(randian);
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        for (var i = 0;i < titlechar.length; i++) {
            ctx.fillText(titlechar[i], x, y);
            if (randian > 0) {
                for (var j = 0;j < 3; j++) {
                    const txtWidth = ctx.measureText(".").width;
                    rotate = Math.asin(txtWidth / model.radius) / Math.PI * 180 + rotate;
                    this.canvasRotateUtil.rotate(ctx, rotate);
                    ctx.fillText(".", x, y);
                }
                break;
            }
            const txtWidth = ctx.measureText(titlechar[i]).width;
            rotate = Math.asin(txtWidth / model.radius) / Math.PI * 180 + rotate;
            this.canvasRotateUtil.rotate(ctx, rotate);
        }
        this.canvasRotateUtil.rotate(ctx, 0);

    },


    drawProgressText(ctx, model, progress) {
        const percentProgress = progress * MAX_PROGRESS + "%"
        const offset = this.models[0].radius / model.radius * 0.02;
        const randian = (progress - 0.25 - offset) * Math.PI * 2;
        const x = this.centerX + model.radius * Math.cos(randian);
        const y = this.centerY + model.radius * Math.sin(randian);
        ctx.textAlign = 'center';
        ctx.fillText(percentProgress, x, y);
    }
}
